<div>
  共享开关：
  <nz-switch [(ngModel)]="permission.open" (click)="openPermission()"></nz-switch>
  <br>
  <nz-tabset *ngIf="permission.open">
    <nz-tab [nzTitle]="annTemplate" >
      <ng-template #annTemplate><i nz-icon nzType="question"></i>匿名</ng-template>
      <bby-permission-card-body [file]="file" [detail]="permission.ann"></bby-permission-card-body>
    </nz-tab>
    <nz-tab [nzTitle]="userTemplate">
      <ng-template #userTemplate><i nz-icon nzType="user"></i>用户</ng-template>
      <bby-permission-card-body [file]="file" [detail]="permission.user"></bby-permission-card-body>
    </nz-tab>
    <nz-tab [nzTitle]="customTemplate">
      <ng-template #customTemplate><i nz-icon nzType="group"></i>用户组</ng-template>
      <bby-permission-card-body [file]="file" [detail]="permission.custom"></bby-permission-card-body>
      <!-- 选择用户组 -->
      <div style="margin: 10px 0">
        <nz-tag [nzColor]="'magenta'">
          <i nz-icon nzType="usergroup-add" nzTheme="outline"></i>
          选择用户组：
        </nz-tag>

        <nz-select [nzDisabled]="!permission.custom.open" style="min-width: 70px" [nzMaxTagCount]="3" [nzMaxTagPlaceholder]="tagPlaceHolder" nzMode="multiple" nzPlaceHolder="未选择" [(ngModel)]="permission.customGroup">
          <nz-option *ngFor="let item of groupList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
        </nz-select>
        <ng-template #tagPlaceHolder let-selectedList>隐藏了{{ selectedList.length }}个选择</ng-template>
      </div>
    </nz-tab>
  </nz-tabset>
</div>

